<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style>
			*{margin: 0;padding: 0;list-style: none;text-decoration: none;font-family: '幼圆';color:#323232;}
			html{font-size: calc(100/750*100vw);}
			a {
  			-webkit-tap-highlight-color: transparent;
  			-webkit-touch-callout: none;
  			-webkit-user-select: none;}
 			h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight:200;-webkit-margin-before: 0;-webkit-margin-after: 0;}
			section{min-height:12.08rem;width: 7.5rem;margin-top:1.26rem;background: #F0F0F0;}
			section form{width: 100%;background: #F0F0F0;position: relative;}
			section form h1{height:.9rem;width: 100%;text-indent:.3rem;font-size:.32rem;background: #FAFAFA;
			line-height: .9rem;float:left;margin-top: .2rem;}
			section form input{height: .9rem;width:4.8rem;border: none;outline: none;font-size: .32rem;color: #909090;
			position:absolute;background: #FAFAFA;}
			section form .in1{left: 1.94rem;top: .2rem;text-align: left;}
			section form .in2{left: 1.94rem;top: 1.3rem;}
			section form .in3{left: 1.94rem;top: 2.4rem;}
			section form h2{height:1.8rem;width: 100%;text-indent:.3rem;font-size:.32rem;background: #FAFAFA;line-height: .9rem;
			float:left;margin-top: .2rem;}
			section form textarea{height:1.8rem;width: 4.8rem;overflow: auto;resize: none;border: none;
			background:#FAFAFA ;line-height: .9rem;font-size: .32rem;position: absolute;left: 1.94rem;top: 3.5rem;}
		</style>
	</head>
	<body>
		<section>
			<form action='#'>
				<h1>微信昵称</h1><input type="button" value="获取微信昵称" class="in1" />
				<h1>真实姓名</h1><input type="text" placeholder="输入姓名" class="in2" />
				<h1>我的手机</h1><input type="text" placeholder="输入手机号" class="in3" />
				<h2>收货地址</h2><textarea maxlength="60" placeholder="输入地址"></textarea>
			</form>
		</section>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script>
			$('.in3').blur(function(){
				var reg=/^1[35678]{1}\d{9}$/g;
				var str=$(this).val();
				if(!reg.test(str)){
					$('.in3').val('请填写有效的手机号');
				}else{
					var re=/^(\d{3})(\d{4})(\d{4})$/;
					var str=str.replace(re,'$1****$2');
					$('.in3').val(str);
				}
			})
		</script>
	</body>
</html>
